<template>
	<view class="wrapper">
		<view class="login">
			<view class="login-app">
				<!--#ifdef MP-WEIXIN-->
				<view class="login-bar" :style="{height: `${setStore?.menuButton?.top || 0}px`}"></view>
				<!-- #endif -->
				<view class="login-logo">
					<image class="login-logo-img" :src="imgUrl(setStore.appLogo)"></image>
				</view>
				<view class="login-name">{{setStore.appName}}</view>
			</view>
			<view class="login-content">
				<view class="login-content-title">为了为您提供更优质的服务，我们需要获得你的手机号码</view>
				<view class="login-content-form">
					<uni-forms
						:modelValue="formData"
						ref="formRef"
						:label-width="80"
						:rules="rules">
						<uni-forms-item label="手机号码" name="phone">
							<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号码" />
						</uni-forms-item>
						<uni-forms-item label="验证码" name="code">
							<view class="login-code main-flex">
								<view class="main-flex-item">
									<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
								</view>
								<button class="ty-button login-code-btn" @click="getCode">{{tips}}</button>
							</view>
						</uni-forms-item>
					</uni-forms>
					<u-code
						:seconds="seconds"
						@end="end"
						@start="start"
						ref="codeRef" 
						@change="codeChange"></u-code>
				</view>
				<button class="ty-button ty-button-confirm login-btn" @click="submitForm">确认绑定</button>
				<button class="ty-button ty-button-confirm login-btn" @click="cancel">取消绑定</button>
			</view>
			<view class="login-agreement main-flex" @click="changeAgreement">
				<uni-icons class="login-agreement-icon" :type="isAgreement?'checkbox-filled':'circle'" size="20" :color="isAgreement?'#e3230e':'#666666'"></uni-icons>
				<text>我已阅读并同意</text>
				<text class="login-agreement-item" @click.stop="goAgreement(1)">《服务协议》</text>
				<text>和</text>
				<text class="login-agreement-item" @click.stop="goAgreement(2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { appletBindPhone, getNodeMsg } from "@/api/app_api/login"
import { setToken } from '@/utils/auth'
import modal from '@/plugins/modal'
import { throttle, debounce, test, sleep } from '@/uni_modules/uview-plus'
import md5 from 'js-md5'
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const formRef = ref(null)
	const formData = ref({
		phone: '',
		code: ''
	})
	// 表单验证
	const rules = ref({
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号码'
			}, {
				validateFunction: function (rule,value,data,callback) {
					if (!test.mobile(value)) {
						callback('请输入正确手机号码')
					}
					return true
				}
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码'
			}]
		}
	})
	
	// 验证码相关
	const tips = ref('获取验证码')
	const seconds = ref(60)
	const codeRef = ref(null)
	const codeChange = (text) => {
		tips.value = text
	}
	const end = () => {
		console.log('结束')
	}
	const start = () => {
		console.log('开始')
	}
	const getCode = () => {
		if (!formData.value.phone || !test.mobile(formData.value.phone)) return uni.$u.toast('请输入正确手机号码')
		if(codeRef.value.canGetCode) {
			getNodeMsg({
				phone: formData.value.phone,
				status: 0,
				code: md5(`zyzy&${formData.value.phone}`)
			}).then(res => {
				uni.$u.toast('验证码已发送')
				codeRef.value.start()
			})
		} else {
			uni.$u.toast('倒计时结束后再发送')
		}
	}
	
	const isSubmit = ref(false)
	const submitForm = (e) => {
		if (!isAgreement.value) return uni.$u.toast('阅读并同意《服务协议》和《隐私政策》')
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = {
				...formRes
			}
			appletBindPhone(params).then(res => {
				if (res.token) {
					uni.$u.toast(res.msg)
					setToken(res.token)
					userStore.getUserInfo()
					uni.$u.sleep(1000).then(() => {
						isSubmit.value = false
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				} else {
					setStore.setBindPhone({
						...res.data,
						phone:params.phone
					})
					uni.$u.sleep(1000).then(() => {
						uni.navigateTo({
							url: `/pages/mine/correlation`
						})
						isSubmit.value = false
					})
				}
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	const isAgreement = ref(false)
	const changeAgreement = () => {
		isAgreement.value = !isAgreement.value
	}
	// 查看协议
	const goAgreement = (type) => {
		uni.navigateTo({
			url: `/pages/web/web?type=${type}`
		})
	}
	// 暂不登录
	const submitBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	// 取消绑定
	const cancel = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	
	onReady(() => {
		formRef.value.setRules(rules.value)
	})
</script>

<style lang="scss">
	.login {
		padding: 40rpx;
		&-app {
			width: 100%;
			text-align: center;
		}
		&-bar {
			width: 100%;
		}
		&-content {
			width: 100%;
			&-title {
				font-size: 28rpx;
				text-align: $text-light;
				margin-top: 40rpx;
			}
			&-form {
				margin-top: 40rpx;
			}
			&-btns {
				margin-top: 40rpx;
			}
		}
		&-logo {
			&-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}
		&-name {
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		&-btn {
			width: 100%;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			justify-content: center;
			&+.login-btn {
				margin-top: 40rpx;
			}
		}
		&-code {
			&-btn {
				width: 110px;
				height: 36px;
				border-radius: 4px;
				padding: 0;
				margin: 0;
				margin-left: 20rpx;
				font-size: 14px;
				color: #ffffff;
				background-color: $primary-color;
			}
		}
		&-agreement {
			width: 100%;
			font-size: 28rpx;
			margin-top: 40rpx;
			justify-content: center;
			&-icon {
				margin-right: 10rpx;
			}
			&-item {
				color: #8c97cb;
			}
		}
	}
</style>
